<template lang="pug">
.preview
  .preview-video
    .video-content
      video.video-body(:src="currentVideo.videoUrl" ref="video" controls muted autoplay)
      .video-title {{currentVideo.title}}
    .video-list
      .video-list-title 滚动播放列表
      .video-list-content
        .video-item(v-for="item, index in videos" @click="changeVideo(item, index)")
          .video-item-title {{item.title}}
          .video-item-icon
            .iconfont.icon-play
  .preview-params
    .real-params
      .real-params-container
        .real-today
          .real-time {{new Date().format('hh:mm')}}
          .real-day {{new Date().format('yyyy/MM/dd')}} {{weekDay}}
          .real-address
            .iconfont.icon-address
            .real-address-value {{realData.data.localCity}}
          .real-weather-data
            .iconfont.icon-cloudy
            .real-weather-data-value {{todayWeather.highTemp}} ℃
          .real-weather-text {{todayWeather.weather}} {{todayWeather.windDirection2}}{{todayWeather.windSpeed}}
        .real-body
          .real-body-header
            .real-body-title
              .real-body-title-cn 物料间实时数据
              .real-body-title-en Materials Room Real time data
            .real-logo
              img(src="../static/images/login_logo.png")
            router-link.real-home(:to="{ name: 'index' }")
              .iconfont.icon-home
          .real-sample
            .real-sample-item
              .real-sample-item-label 样品总数
              .real-sample-item-num {{realData.data.templateTotalNum}}
            .real-sample-item.end
              .real-sample-item-label 样品款式
              .real-sample-item-num {{realData.data.templateBrandTotalNum}}
          .real-data
            .real-data-item
              .real-data-item-hd
                .real-data-item-cn 平台上物料总数
                .real-data-item-en Materials Room Real
              .real-data-item-bd {{realData.data.materialTotalNum}}
              .real-data-item-ft
                .real-data-item-ft-num {{realData.data.materialNewNum}}
                .iconfont.icon-rise
            .real-data-item
              .real-data-item-hd
                .real-data-item-cn 平台入驻供应商数
                .real-data-item-en Materials Room Real
              .real-data-item-bd {{realData.data.supplierTotalNum}}
              .real-data-item-ft
                .real-data-item-ft-num {{realData.data.supplierNewNum}}
                .iconfont.icon-rise
            .real-data-item
              .real-data-item-hd
                .real-data-item-cn 平台入驻品牌数
                .real-data-item-en Materials Room Real
              .real-data-item-bd {{realData.data.brandTotalNum}}
              .real-data-item-ft
                .real-data-item-ft-num {{realData.data.brandNewNum}}
                .iconfont.icon-rise
            .real-data-item
              .real-data-item-hd
                .real-data-item-cn 物料间上架供应商数
                .real-data-item-en Materials Room Real
              .real-data-item-bd {{realData.data.materialRoomMaterialTotalNum}}
              .real-data-item-ft
                .real-data-item-ft-num {{realData.data.materialRoomMaterialNewNum}}
                .iconfont.icon-rise
    .cate-params
      .cate-params-container
        .cate-params-title 物料间分类统计
        .cate-params-echarts
          #echarts-container
        .cate-params-today
          .cate-params-today-title 今日动态
          .cate-params-today-bd
            .cate-params-today-item
              .cate-params-today-item-bd
                .cate-params-today-item-label 今日访问量
                .cate-params-today-item-value {{realData.data.todayAccessNum}}
            .cate-params-today-item
              .cate-params-today-item-bd
                .cate-params-today-item-label 今日上样数
                .cate-params-today-item-value {{realData.data.todayOnSaleNum}}
</template>

<script>
import { getVideoList, getRealTimeData } from 'api'
export default {
  name: 'statistics',
  data () {
    return {
      currentVideo: {
        videoUrl: '',
        title: ''
      },
      defaulltIndex: 0,
      videos: [],
      realData: {
        data: {
          materialRoomCategoryDetail: []
        },
        weather: []
      },
      todayWeather: {}
    }
  },
  computed: {
    weekDay () {
      let tempDate = new Date();
      let days = tempDate.getDay()
      let week = ''
      switch(days) {
        case 1:
            week = '星期一';
            break;
        case 2:
            week = '星期二';
            break;
        case 3:
            week = '星期三';
            break;
        case 4:
            week = '星期四';
            break;
        case 5:
            week = '星期五';
            break;
        case 6:
            week = '星期六';
            break;
        case 0:
            week = '星期日';
            break;
      }
      return week
    }
  },
  methods: {
    changeVideo (item, index) {
      this.defaulltIndex = index
      this.currentVideo = item
    },
    initEchart () {
      this.myChart = this.$echarts.init(document.getElementById('echarts-container'))
      let xData = []
      let yData = []
      this.realData.data.materialRoomCategoryDetail.forEach(item => {
        yData.push(item.count)
        xData.push(item.name)
      })
      let chartOption = {
        color: '#fff',
          grid: {
            left: '2%',
            right: '2%',
            bottom: '5%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            axisLabel: {
              interval: 0,
              fontSize: 14
            },
            axisTick: {
              show: false
            },
            data: xData
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '设计师',
              type: 'bar',
              key: 'designerCount',
              stack: 'ad',
              color: '#1983E1',
              arCategoryGap: '100%',
              barWidth: 30,
              data: yData,
            }
          ]
        }
        // 绘制图表
        this.myChart.setOption(chartOption)
    },
    async getVideoList () {
      try {
        const { ResultSet } = await this.$axios.post(getVideoList, { pageSize: 5, currentPage: 1 })
        this.videos = ResultSet.userData.data
        this.currentVideo = this.videos[this.defaulltIndex]
        let videosLen = this.videos.length
        this.$refs.video.addEventListener('ended', () => {
          if (this.defaulltIndex >= videosLen - 1) {
            this.defaulltIndex = 0
          } else {
            this.defaulltIndex += 1
          }
          this.currentVideo = this.videos[this.defaulltIndex]
        })
      } catch (err) {
        this.message({ show: true, content: err.message || err.ResultSet.errors })
      }
    },
    async getRealTimeData () {
      try {
        const { ResultSet } = await this.$axios.post(getRealTimeData)
        this.realData = ResultSet.userData
        this.todayWeather = ResultSet.userData.weather[0]
        this.initEchart()
      } catch (err) {
        this.message({ show: true, content: err.message || err.ResultSet.errors })
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.getVideoList()
      vm.getRealTimeData()
    })
  }
}
</script>

<style lang="scss" scoped>
.preview {
  height: 100%;
  padding: 20px 15px;
  display: flex;
}
.preview-video {
  width: 55%;
  height: 100%;
}
.preview-params {
  flex: 1;
  padding-left: 15px;
}
.video-content {
  width: 100%;
  height: 60%;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .2);
}
.video-body {
  width: 100%;
  height: 90%;
}
.video-title {
  margin-top: 15px;
  font-size: 16px;
  font-weight: bold;
}
.video-list {
  margin-top: 15px;
  padding: 15px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .2);
  width: 100%;
  height: calc(40% - 15px);
}
.video-list-title {
  font-size: 16px;
  font-weight: bold;
  height: 26px;
}
.video-list-content {
  margin-top: 10px;
  height: calc(100% - 36px);
  overflow: auto;
}
.video-item {
  display: flex;
  align-items: center;
  padding: 10px;
  &:nth-child(odd) {
    background: #f3f3f3;
  }
  .video-item-title {
    flex: 1;
    font-size: 12px;
  }
  .iconfont {
    font-size: 16px;
  }
}
.real-params {
  padding-bottom: 10px;
  width: 100%;
  height: 52%;
}
.cate-params {
  padding-top: 10px;
  width: 100%;
  height: 48%;
}
.real-params-container,
.cate-params-container {
  width: 100%;
  height: 100%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .2);
}
.real-params-container {
  padding: 15px;
}
.cate-params-container{
  padding: 10px 15px;
}
.real-params-container {
  display: flex;
}
.real-today {
  width: 30%;
  text-align: center;
}
.real-time {
  font-size: 30px;
  font-weight: bold;
}
.real-day {
  margin: 5px 0;
  font-size: 12px;
}
.real-address {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  .iconfont {
    font-size: 16px;
    margin-right: 10px;
  }
  .real-address-value {
    font-size: 16px;
  }
}
.real-weather-data {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
  font-weight: bold;
  .iconfont {
    font-size: 16px;
    margin-right: 10px;
  }
  .real-weather-data-value {
    font-size: 16px;
  } 
}
.real-weather-text {
  font-size: 12px;
  font-weight: bold;
}
.real-body {
  flex: 1;
}
.real-body-header {
  display: flex;
  align-items: center;
}
.real-body-title {
  flex: 1;
}
.real-body-title-cn {
  font-size: 18px;
  font-weight: bold;
}
.real-body-title-en {
  font-size: 10px;
  color: #999;
}
.real-logo {
  width: 70px;
}
.real-home {
  margin-left: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: #F8F8F8;
  color: #999999;
}
.real-sample {
  display: flex;
  margin: 10px 0;
  .real-sample-item {
    width: 50%;
    display: flex;
    &.end {
      justify-content: flex-end;
      border-left: 1px solid #999;
    }
    .real-sample-item-label {
      font-size: 12px;
      font-weight: bold;
      color: #666;
    }
    .real-sample-item-num {
      font-size: 20px;
      font-weight: bold;
      margin-left: 10px;
    }
  }
}
.real-data-item {
  margin-top: 10px;
  display: flex;
  align-items: center;
  padding: 5px 10px;
  background: #F2F2F2;
}
.real-data-item-hd {
  .real-data-item-cn {
    font-size: 12px;
    font-weight: bold;
    color: #666;
  }
  .real-data-item-en {
    font-size: 12px;
    color: #999;
  }
}
.real-data-item-bd {
  flex: 1;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}
.real-data-item-ft {
  display: flex;
  align-items: center;
  .real-data-item-ft-num {
    font-size: 12px;
    font-weight: bold;
    color: #666;
    margin-right: 10px;
  }
  .iconfont {
    font-size: 12px;
    color: #666;
  }
}
.cate-params-echarts {
  height: 55%;
  #echarts-container {
    width: 100%;
    height: 100%;
  }
}
.cate-params-title {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 10px;
}
.cate-params-today {
  margin-top: 5px;
}
.cate-params-today-title {
  font-size: 18px;
  font-weight: bold;
}
.cate-params-today-num {
  font-size: 12px;
  color: #999;
}
.cate-params-today-bd {
  display: flex;
  align-items: center;
  margin-top: 5px;
}
.cate-params-today-item {
  width: 50%;
  &:nth-child(1) {
    margin-right: 15px;
  }
  &:nth-child(2) {
    margin-left: 15px;
  }
  .cate-params-today-item-bd {
    background: #F2F2F2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 20px 5px 10px;
    .cate-params-today-item-label {
      font-size: 16px;
    }
    .cate-params-today-item-value {
      font-size: 18px;
      font-weight: bold;
    }
  }
}
</style>